<template>
  <div>
     <el-row>
      <el-col :span="3"> 
        <el-input v-model="sear.company_name" placeholder="请输入用户名称"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button @click="company_name_click" icon="el-icon-search"  class="add_btn"> 搜索</el-button>
        <el-button @click="add_user"  v-permission="'system:users:add'" icon="el-icon-plus" class="add_btn">新增用户</el-button>
      </el-col>
    </el-row>

     <el-table :data="dataList" stripe style="width: 100%" border>
       <el-table-column prop="company_name" label="用户名称">
       </el-table-column>
       <el-table-column prop="phone" label="手机号">
       </el-table-column>
       <el-table-column prop="username" label="账号">
       </el-table-column>
       <el-table-column prop="password" label="密码">
       </el-table-column>
       <el-table-column  label="角色">
          <template slot-scope="scope">
            <span>{{scope.row.role[0].name}}</span>
           </template>
       </el-table-column>
       <el-table-column  label="是否主账号">
          <template slot-scope="scope">
            <span>{{scope.row.is_primary==1?'是':'否'}}</span>
           </template>
       </el-table-column>
       <el-table-column label="操作" width="200">
         <template slot-scope="scope">
           <el-button @click="set_user(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
           <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
             title="是否删除这条数据？" @confirm="del_product(scope.row)">
             <el-button slot="reference" type="text" icon="el-icon-delete"> 删除</el-button>
           </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
     <div class="pagination">
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click='prev'
         @next-click='next' :current-page.sync="pagination.page" :page-size="pagination.per_page"
         layout="total, prev, pager, next" :total="total">
       </el-pagination>
     </div>


     <!-- 新增/修改管理员 -->
     <el-dialog :title="user_title" :visible.sync="admin_box" width="30%" @close="dialog_click" :close-on-click-modal='false'>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
         <el-form-item label="用户名称" prop="company_names">
           <el-input v-model="ruleForm.company_names" @input="changeValue"></el-input>
         </el-form-item>
         <el-form-item label="手机号" prop="phones">
           <el-input v-model="ruleForm.phones" @input="changeValue"></el-input>
         </el-form-item>
         <el-form-item label="账号" prop="usernames" >
           <el-input v-model="ruleForm.usernames" :disabled="isset" @input="changeValue"></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="passwords" >
           <el-input v-model="ruleForm.passwords" @input="changeValue"></el-input>
         </el-form-item>
         <el-form-item label="角色" prop="roles_id">
           <el-select v-model="ruleForm.roles_id" placeholder="请选择角色" @change="changeValue">
             <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="admin_box=false">取 消</el-button>
         <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
       </span>
     </el-dialog>
  </div>
</template>

<script>
  import {getUserList,getRoleList,createUser } from '@/api/role/index'
  export default {
    data() {
      return {
        sear:{
          company_name:'',
        },
        isset:false,
        admin_box:false,
        roleList:[],
        ruleForm:{
          id:'',
          usernames:'',
          passwords:'',
          phones:'',
          company_names:'',
          roles_id:'',
        },
        rules:{
          usernames:[
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            }
          ],
          passwords:[
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            }
          ],
          phones:[
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            }
          ],
          company_names:[
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            }
          ],
          roles_id:[
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            }
          ],
        },
        user_title:'',
        dataList: [],
        pagination: {
          per_page:10,
          page: 1,
        },
        total: 0,
        }
      },
      mounted() {
        this.getlist()
        this.getrole()
      },
      methods:{
        getrole(){
          getRoleList().then(res => {
            let roleLists=[];
            if (res.code == 200) {
              this.roleList = res.data.data

              this.roleList.forEach(item=>{
                if(item.name!='普通员工'){
                  roleLists.push(item)
                } 
              })
            }
            this.roleList=roleLists
          })
        },
          getlist(){
            getUserList(...this.pagination,...this.ser).then(res => {
              if (res.code == 200) {
                this.dataList = res.data.data
                this.total = res.data.total
              }
            })
          },
          company_name_click(){
            getUserList(this.sear).then(res => {
              if (res.code == 200) {
                this.dataList = res.data.data
                this.total = res.data.total
              }
            })
          },
          handleSizeChange(val) {
            console.log(val)
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagination.page = val
            this.getlist()
          },
          prev() {
            this.pagination.page = this.pagination.page - 1
            this.getlist()
          },
          next() {
            console.log('ss')
            this.pagination.page = this.pagination.page + 1
            this.getlist()
          },
          dialog_click(){
            console.log('222')

            this.ruleForm={
              id:'',
              usernames:'',
              passwords:'',
              phones:'',
              company_names:'',
              roles_id:'',
            }
            this.$nextTick()
            this.isset=false
          },
          add_user(){
            this.admin_box=true
            this.user_title='新增用户'
          },
          set_user(row){
            this.admin_box=true
            this.user_title='修改用户'
            this.ruleForm=row
            this.ruleForm.id=row.id
            this.ruleForm.roles_id=row.role[0].id
            this.ruleForm.usernames=row.username
            this.ruleForm.passwords=row.password
            this.ruleForm.phones=row.phone
            this.ruleForm.company_names=row.company_name

            console.log(this.ruleForm)
            this.isset=true
          },
          submitForm(formName){
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  createUser(this.ruleForm).then(res => {
                    if (res.code == 200) {
                      this.admin_box = false
                      this.$message.success('提交成功')
                      this.getlist()
                    }
                  })
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
          },
          changeValue(){
            this.$forceUpdate()
          }

      },

  }

</script>

<style>
</style>
